<template>
  <div class="my-order">
    <ul class="tab-box">
      <li :key="index" v-for="(item,index) in tabs" @click="isTab=index,selectStatus(index)">
        <span :class="{on:isTab==index}">{{item}}</span>
      </li>
    </ul>
    <!--tab内容切换-->
    <div class="tab-content" v-for="items in orderData">
      <div class="fl-box">
        <div>订单编号:{{items.billNo}}</div>
        <div>{{items.orderStatus == 0 ? '待付款' : items.orderStatus == 1 ? '待发货' : items.orderStatus == 2 ? '待收货':'已完成'
          }}
        </div>
      </div>
      <ul class="order-box" @click="goOrderDetail(items.billNo)">
        <li v-for="(item,index) in items.orderGoodsList" @click="goOrderDetail(items.billNo)">
          <div class="li-left">
            <!--<img :src="item.goods.goodsImg" alt="">-->
            <img :src="sourceUrl+item.goods.goodsImg" alt="">
          </div>
          <div class="li-right">
            <p class="li-title">{{item.goods.goodsName}}</p>
            <div class="li-describe">{{item.goods.goodsDesc}}</div>
            <div class="fl-box">
              <div class="fb-left">
                ￥{{item.price}}
              </div>
              <div class="fb-right">
                x{{item.orderNumber}}
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="award-money" v-if="items.tip != null">
        <img src="../../assets/images/heart.png" alt="">侍酒师感谢金<span>{{items.tip}}</span>元
      </div>
      <div class="t-right">
        <span class="t-num">共{{items.orderGoodsList.length}}种商品</span>
        <span class="t-realy" v-if="items.paidMoney!=null">实付{{items.paidMoney}}元</span>
        <span class="t-realy" v-if="items.paidMoney==null">应付{{items.totalMoney}}元</span>
      </div>

      <!--<template v-if="items.orderStatus == 3">-->
      <!--<div class="btn-box">-->
      <!--<router-link :to="'/evaluate?id='+items.billNo">-->
      <!--<span>我要评价</span>-->
      <!--</router-link>-->
      <!--<span>再次购买</span>-->
      <!--</div>-->
      <!--</template>-->

      <template v-if="items.orderStatus == 0">
        <div class="btn-box">
          <router-link to="">
            <span @click="deleteOrder(items.id)">删除订单</span>
          </router-link>
          <span @click="payNow(items.billNo)" v-if="items.orderType!=4">立即付款</span>
        </div>
      </template>
      <template v-else-if="items.orderStatus == 1">

        <div class="btn-box">
          <a style="float: left; font-size: 0.85rem" v-if="items.isRec==2&&items.cancel!=1">已被拒</a>
          <a style="float: left; font-size: 0.85rem" v-if="items.cancel==1">已取消</a>
          <span @click="deleteOrder(items.id)" v-if="items.cancel==1||items.isRec==2">删除订单</span>
          <span @click="quxiaoOrder(items.id)" v-if="items.orderGoodsList[0].goods.upgradePatch==0&&items.isRec!=2&&items.cancel==0">取消订单</span>
          <span @click="goOrderDetail(items.billNo)">查看详情</span>
        </div>
      </template>
      <template v-else-if="items.orderStatus == 2">
        <div class="btn-box">
          <!--<router-link :to="'/evaluate?id='+items.billNo" v-if="items.isEvaluate==0">-->
            <!--<span>我要评价</span>-->
          <!--</router-link>-->
          <span @click="updateOrder(items.id)">确认收货</span>
        </div>
      </template>
      <template v-else="items.orderStatus == 3">
        <div class="btn-box" >
          <!--<span>删除订单</span>-->
          <router-link :to="'/evaluate?id='+items.billNo" v-if="items.isEvaluate==0">
            <span>我要评价</span>
          </router-link>
          <span @click="deleteOrder(items.id)"  v-if="items.isEvaluate!=0">删除订单</span>
        </div>


      </template>
    </div>
    <TextPop v-if="isDelete" :textPop="popTextDel"></TextPop>
    <TextPop v-if="isRec" :textPop="popTextRec"></TextPop>
  </div>
</template>

<script>
  import global from '../public/global.vue'
  import wx from 'weixin-js-sdk'

  export default {
    name: 'myOrder',
    data() {

      return {
        tabs: ['全部订单', '待付款', '待发货', '待收货', '待评价'],//tabs标签
        isTab: 0,//选中的tab
        orderData: [],//订单数据列表
        sourceUrl: global.sourceUrl,
        isDelete:false,
        isRec:false,
        popTextDel:"成功",
        popTextRec:"确认收货成功"
      }
    },
    methods: {
      //选择订单状态

      selectStatus(idx) {
        let self = this;

        switch (idx) {
          case 0: //全部订单
            self.getListByStatus(99);
            break;
          case 1: //待付款
            self.getListByStatus(0);
            break;
          case 2: //待发货
            self.getListByStatus(1);
            break;
          case 3: //待收货
            self.getListByStatus(2);
            break;
          case 4: //待评价
            self.getListByStatus(3);
            break;
        }

      },
      getListByStatus(status) {
        let self = this;

        var uid = global.getCookie("uid")
        let url = global.apiUrl;

        let data = "?uid=" + uid;
        if (status != 99) {
          data += "&status=" + status;
        }

        self.$http.get(url + '/order/orderList' + data)
          .then(res => {
            console.log(res);
            if (res.data.code == 0) {
//              if(status==3){
//                for(let i=0;i<res.data.data.length;i++){
//                  if(res.data.data[i].isEvaluate==0){
//                    self.orderData.push(res.data.data[i])
//                  }
//                }
//              }else{
                self.orderData = res.data.data;
              //}
              if(res.data.data.length==0){
                self.orderData=[];
              }

            }
          }).catch(function (err) {
          console.error(err);
        })
      },
      //去订单详情
      goOrderDetail(id) {
        this.$router.push({path: '/orderDetail?billNo=' + id});
      },

      //收货
      updateOrder(id) {
        let self = this;
        let url = global.apiUrl;
        self.$http.get(url + '/order/updateOrder?id='+id).then(res => {
          this.isRec = true
          self.getListByStatus(2);
          setTimeout(()=> {
            this.isRec = false
          }, 1000 )
        })
      },
      quxiaoOrder(id){
        if(window.confirm('你确定要取消么？')){
          let self = this;
          let url = global.apiUrl;
          let data = "?id=" + id;
          self.$http.get(url + '/order/cancelOrder' + data)
            .then(res => {
              console.log(res);
              if (res.data.code == 0) {
                this.isDelete = true
                self.getListByStatus(this.isTab>0?this.isTab-1:99);
                setTimeout(()=>{
                  this.isDelete = false
                },1200)
              }
            }).catch(function (err) {
            console.error(err);
          })
        }

      },
      deleteOrder(id) {
        let self = this;
        let url = global.apiUrl;
        let data = "?id=" + id;
        self.$http.get(url + '/order/deleteOrder' + data)
          .then(res => {
            console.log(res);
            if (res.data.code == 0) {
              this.isDelete = true
              self.getListByStatus(this.isTab>0?this.isTab-1:99);
              setTimeout(()=>{
                this.isDelete = false
              },1200)
            }
          }).catch(function (err) {
          console.error(err);
        })
      },
      payNow(billNo){
        let params = new URLSearchParams();
        params.append('billNo', billNo);
        this.$http({
          method: "post",
          url: global.apiUrl + '/pay/payOrder',
          data: params,
        }).then(res => {
          if(res.data.code==0){
            this.appId=res.data.data.appId;
            this.nonceStr=res.data.data.nonceStr;
            this.paySign=res.data.data.paySign;
            this.prepay_id=res.data.data.package;
            this.timeStamp=res.data.data.timeStamp;
            this.onBridgeReady();
          }
        }).catch(function (err) {
          console.error(err);
        })
      },
      //微信支付接口调用
      onBridgeReady() {
        let self=this;
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": self.appId, //公众号名称，由商户传入
            "timeStamp": self.timeStamp, //时间戳，自1970年以来的秒数
            "nonceStr": self.nonceStr, //随机串
            "package": self.prepay_id,
            "signType": "MD5", //微信签名方式：
            "paySign": self.paySign //微信签名
          },
          function (res) {
            console.log("--支付拉起--")
            console.log(JSON.stringify(res));
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              //$.toast(JSON.stringify(res));
              // var html = '<div class="weui-msg"><div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div><div class="weui-msg__text-area"><h2 class="weui-msg__title">支付成功</h2></div></div>';
              //window.location = "/page/pay_success.html";
              self.isPop=false;
              self.$router.push({path:'/myOrder/?sid=99'});
              // $("#content-box").html(html);
              // $.toast("支付成功", "text");
              // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
              //alert("支付成功");
            } else {
              //$.toast(JSON.stringify(res));
//              $.toast("支付失败", "text");
              alert("支付失败");
            }
          }
        );

      }
    },
    created: function () {
      document.title = "我的订单";
      let sid = this.$route.query.sid;
      switch (sid) {
        case '99' :
          this.isTab = 0;
          this.getListByStatus(99);
          break;
        case '0' :
          this.isTab = 1;
          this.getListByStatus(0);
          break;
        case '1' :
          this.isTab = 2;
          this.getListByStatus(1);
          break;
        case '2' :
          this.isTab = 3;
          this.getListByStatus(2);
          break;
        case '3' :
          this.isTab = 4;
          this.getListByStatus(3);
          break;
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .my-order {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 100%;
    padding-top: 3.5rem;
    background: #f3f3f3;
    /*tab标签*/
    .tab-box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      padding: 0 2.5%;
      font-size: 1rem;
      display: flex;
      justify-content: space-between;
      background: #fff;
      color: #666;
      margin-bottom: 10px;
      li {
        height: 100%;
        text-align: center;
        span {
          display: inline-block;
          height: 100%;
        }
        .on {
          font-weight: bold;
          color: #D43F3F;
          border-bottom: 2px solid #D43F3F;
        }
      }
    }
    /*tab内容*/
    .tab-content {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
      .fl-box {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.85rem;
        color: #333;

      }
      .order-box {
        width: 100%;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        li {
          width: 100%;
          padding: 3% 0;
          display: flex;
          .li-left {
            flex: 1;
            img {
              width: 100px;
              height: 100px;
              vertical-align: middle;
            }
          }
          .li-right {
            flex: 2;
            .li-title {
              font-size: 0.95rem;
              color: #333;
            }
            .li-describe {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin: 2% auto;
              font-size: 0.8rem;
              color: #666;
            }
            .fl-box {
              height: 1rem;
              line-height: 1rem;
              font-size: 0.9rem;
              .fb-left {
                color: #ff0000;
              }
              .fb-right {
                color: #666;
              }
            }
          }
        }
      }
      .award-money {
        width: 100%;
        padding: 2% 0;
        font-size: 0.85rem;
        img {
          width: 16px;
          vertical-align: middle;
        }
        span {
          color: #ff0000;
        }
      }
      .t-right {
        width: 100%;
        padding: 2% 0;
        text-align: right;
        .t-num {
          font-size: 0.8rem;
          color: #aaa;
        }
        .t-realy {
          font-size: 0.9rem;
          font-size: #333;
        }
      }
      .btn-box {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        text-align: right;
        span {
          padding: 2px 10px;
          border: 1px solid #D43F3F;
          border-radius: 4px;
          font-size: 1rem;
          color: #D43F3F;
        }
      }
    }
  }
</style>
